<!DOCTYPE html>

<html lang="en" data-content_root="../../">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta name="viewport" content="width=device-width, initial-scale=1" />

    <title>Web-app &#8212; Pytch  documentation</title>
    <link rel="stylesheet" type="text/css" href="../../_static/pygments.css?v=03e43079" />
    <link rel="stylesheet" type="text/css" href="../../_static/classic.css?v=36340f97" />
    <link rel="stylesheet" type="text/css" href="../../_static/css/pytch-classic.css?v=0321735e" />
    
    <script src="../../_static/documentation_options.js?v=7f41d439"></script>
    <script src="../../_static/doctools.js?v=9bcbadda"></script>
    <script src="../../_static/sphinx_highlight.js?v=dc90522c"></script>
    
    <link rel="icon" href="../../_static/favicon.ico"/>
    <link rel="author" title="About these documents" href="../../about.html" />
    <link rel="index" title="Index" href="../../genindex.html" />
    <link rel="search" title="Search" href="../../search.html" />
    <link rel="next" title="Rendering" href="rendering.html" />
    <link rel="prev" title="Testing" href="testing.html" /> 
  </head><body>
<div class="NavBar">
  <a href="../../../app/"><h1>Pytch</h1></a>
  <ul>
    <a href="https://pytch.scss.tcd.ie/"><li>About Pytch</li></a>
    <a href="../../index.html"><li>Help</li></a>
    <a href="../../../app/tutorials/"><li>Tutorials</li></a>
    <a href="../../../app/my-projects/"><li>My projects</li></a>
  </ul>
</div>
<div class="warning-work-in-progress">
  <p>These help pages are incomplete — we are working on it!</p>
</div>
  

    <div class="document">
      <div class="documentwrapper">
        <div class="bodywrapper">
          <div class="body" role="main">
            
  <section id="web-app">
<h1>Web-app<a class="headerlink" href="#web-app" title="Link to this heading">¶</a></h1>
<p>Provides interactive system for developing Pytch applications.</p>
<p>Relies on the following, as well as on Skulpt:</p>
<ul class="simple">
<li><p>jQuery</p></li>
<li><p>the Ace editor</p></li>
<li><p>jquery-dropdown</p></li>
</ul>
<p>Bulk of work is done by the Pytch runtime, including its Skulpt base.
The job of the web-app is to provide the Skulpt/Pytch API dependency
points (e.g., keyboard, async-load-image).</p>
<p>Rendering: done via an HTML5 canvas.</p>
<p>Keyboard: very similar to mock keyboard except needs to prevent default
handling of key events in Pytch canvas.</p>
<p>Tracks ‘current live project’, i.e., the one which is actually being
rendered to the canvas and receives keyboard etc events. Get new ‘live
project’ as part of boilerplate at the end of a Pytch program which does
go_live(), which happens on ‘build’. Each import-as-main done on the
code (with its boilerplate) creates a new Project object; previous
live-project is ‘cut loose’ to float off into garbage; its
continuations/suspensions are never resume()d so nothing happens. On
first load, have a do-nothing project implementing same interface.</p>
<section id="changed-indicator">
<h2>Changed indicator<a class="headerlink" href="#changed-indicator" title="Link to this heading">¶</a></h2>
<p>Any edit brings up ‘your code changed’ msg; goes away on build. Not
intelligent; if you insert a character then delete it again, it still
thinks code has “changed”.</p>
</section>
<section id="examples">
<h2>Examples<a class="headerlink" href="#examples" title="Link to this heading">¶</a></h2>
<p>Fetch into current editor. Populate menu on load of web-app from
hard-coded list. (Could be done as a separate file or sth if this gets
unwieldy.)</p>
</section>
<section id="save-load">
<h2>Save/load<a class="headerlink" href="#save-load" title="Link to this heading">¶</a></h2>
<p>Via browser local storage. Single-level flat ‘filesystem’.</p>
<section id="interaction-with-examples">
<h3>Interaction with examples<a class="headerlink" href="#interaction-with-examples" title="Link to this heading">¶</a></h3>
<p>Loading an example suggests ‘My X’ as project name for saving.</p>
</section>
</section>
<section id="stdout-and-errors">
<h2>Stdout and errors<a class="headerlink" href="#stdout-and-errors" title="Link to this heading">¶</a></h2>
<p>Python output / errors are collected into panels. (Skulpt has no
‘sys.stderr’.)</p>
</section>
<section id="go-stop-buttons">
<h2>Go / stop buttons<a class="headerlink" href="#go-stop-buttons" title="Link to this heading">¶</a></h2>
<p>Green-flag and red-stop click targets. Feed events into live-project’s
API points.</p>
</section>
<section id="building-project">
<h2>Building project<a class="headerlink" href="#building-project" title="Link to this heading">¶</a></h2>
<p>Executes the user’s program as new ‘main’ module. Expected to interact
with the Pytch / Skulpt runtime via setting the ‘current live project’.</p>
</section>
<section id="stage-canvas">
<h2>Stage canvas<a class="headerlink" href="#stage-canvas" title="Link to this heading">¶</a></h2>
<p>One object; knows how to render ‘put image’ instructions. Passes key
events it receives on to the ‘browser keyboard’ which in turn is what’s
used as ‘keyboard’ dependency of Skulpt/Pytch API.</p>
<p>Annoying coordinate transform needed to cope with Scratch’s
(mathematically sensible) coord frame vs computer-graphics-style canvas
coord frame.</p>
</section>
<section id="global-state-lifecycle">
<h2>Global state lifecycle<a class="headerlink" href="#global-state-lifecycle" title="Link to this heading">¶</a></h2>
<p>(DOC TODO: Better name for this section.)</p>
<p>When class registered, one ‘original’ instance created. Instance-0. Any
state in those objects persists across external events such as
green-flag, red-stop.</p>
</section>
</section>


            <div class="clearer"></div>
          </div>
        </div>
      </div>
      <div class="sphinxsidebar" role="navigation" aria-label="Main">
        <div class="sphinxsidebarwrapper"><ul class="current">
<li class="toctree-l1"><a class="reference internal" href="../../webapp/user/index.html">Using the Pytch web app</a></li>
<li class="toctree-l1"><a class="reference internal" href="../user/index.html">Writing Pytch programs</a></li>
<li class="toctree-l1"><a class="reference internal" href="../../about.html">About Pytch</a></li>
<li class="toctree-l1"><a class="reference internal" href="../../contact.html">Contact</a></li>
<li class="toctree-l1 current"><a class="reference internal" href="../../developer.html">Developer documentation</a><ul class="current">
<li class="toctree-l2"><a class="reference internal" href="../../developer/development-setup.html">Development setup</a></li>
<li class="toctree-l2"><a class="reference internal" href="../../developer/design-overview.html">Design overview</a></li>
<li class="toctree-l2 current"><a class="reference internal" href="index.html">VM</a><ul class="current">
<li class="toctree-l3"><a class="reference internal" href="overview.html">Overview</a></li>
<li class="toctree-l3"><a class="reference internal" href="integration-with-client.html">Integration with client</a></li>
<li class="toctree-l3"><a class="reference internal" href="based-on-skulpt.html">Skulpt: Python / JavaScript bridge</a></li>
<li class="toctree-l3"><a class="reference internal" href="project.html">Project</a></li>
<li class="toctree-l3"><a class="reference internal" href="actor.html">Actor: Sprite and Stage</a></li>
<li class="toctree-l3"><a class="reference internal" href="actor-registration.html">Actor-class registration</a></li>
<li class="toctree-l3"><a class="reference internal" href="threading-model.html">Threading model</a></li>
<li class="toctree-l3"><a class="reference internal" href="hat-blocks.html">Hat blocks</a></li>
<li class="toctree-l3"><a class="reference internal" href="syscalls.html">Syscalls</a></li>
<li class="toctree-l3"><a class="reference internal" href="skulpt-pytch-environment.html">Skulpt API / Pytch environment</a></li>
<li class="toctree-l3"><a class="reference internal" href="testing.html">Testing</a></li>
<li class="toctree-l3 current"><a class="current reference internal" href="#">Web-app</a></li>
<li class="toctree-l3"><a class="reference internal" href="rendering.html">Rendering</a></li>
<li class="toctree-l3"><a class="reference internal" href="hit-detection.html">Collision and click detection</a></li>
<li class="toctree-l3"><a class="reference internal" href="clones.html">Clones</a></li>
<li class="toctree-l3"><a class="reference internal" href="sounds.html">Sounds</a></li>
<li class="toctree-l3"><a class="reference internal" href="tutorials.html">Tutorials</a></li>
<li class="toctree-l3"><a class="reference internal" href="docstrings.html">Docstrings</a></li>
<li class="toctree-l3"><a class="reference internal" href="attribute-watchers.html">Watching object attributes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../../webapp/developer/index.html">Webapp</a></li>
<li class="toctree-l2"><a class="reference internal" href="../../medialib/developer/index.html">Media library</a></li>
<li class="toctree-l2"><a class="reference internal" href="../../developer/index.html">Website</a></li>
<li class="toctree-l2"><a class="reference internal" href="../../build-tools/index.html">Tools</a></li>
<li class="toctree-l2"><a class="reference internal" href="../../source-build.html">Source and build information</a></li>
<li class="toctree-l2"><a class="reference internal" href="../../releases/changelog.html">Changelog</a></li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="../../legal/index.html">Legal information</a></li>
</ul>
<div class="docs-home-link"><hr>
  <ul>
    <li>
      <a href="../../index.html">Pytch help home</a>
    <li>
  </ul>
</div>
        </div>
      </div>
      <div class="clearer"></div>
    </div>
  </body>
</html>